<template>
    <el-dialog v-cloak :close-on-click-modal="false" v-model="props.isShow" append-to-body width="70%"
        :show-close="false" center top="5vh">
        <div style="height: 70vh;">
            <iframe v-if="props.isShow" id="WebCamera" src="/openCamera/index.html" width="100%" height="100%"
                frameborder="0"></iframe>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" style="margin-top: 12px;" @click="openCameraHtml">确定</el-button>
            <el-button style="margin-top: 12px;" @click="handleClose">取消</el-button>
        </span>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
let props = defineProps({
    isShow: {
        type: Boolean
    },
    rows: {}
})

let datas = ref()

onMounted(() => {
    window.addEventListener('message', function (e) {
        datas.value = e.data;
        console.log(e.data);
        
    }, false);
})

const emit = defineEmits(['confirmBox', 'closeBox'])

const openCameraHtml = () => {
    emit('confirmBox', datas.value);
}

const handleClose = () => {
    emit('closeBox');
}

</script>

<style></style>